<template>
  <el-dialog
    v-model="show"
    :title="title"
    destroy-on-close
  >
    <div
      u-flex
      u-justify-center
    >
      <el-form
        ref="formRef"
        label-width="110px"
        :model="form"
        :rules="rules"
      >
        <el-form-item
          label="订单金额下限"
          prop="priceFloor"
        >
          <div u-mr-2>
            <el-input-number
              v-model="form.priceFloor"
              :step="0.01"
              :precision="2"
              :min="0"
              controls-position="right"
              placeholder="请输入"
            />
          </div>
          <span>元</span>
        </el-form-item>

        <el-form-item
          label="订单金额上限"
          prop="priceCeiling"
        >
          <div u-mr-2>
            <el-input-number
              v-model="form.priceCeiling"
              :step="0.01"
              :precision="2"
              controls-position="right"
              :min="form.priceFloor"
              placeholder="请输入"
            />
          </div>
          <span>元</span>
        </el-form-item>

        <el-form-item
          label="运费"
          prop="freightFee"
        >
          <div u-mr-2>
            <el-input-number
              v-model="form.freightFee"
              :step="0.01"
              :precision="2"
              controls-position="right"
              :min="0"
              placeholder="请输入"
            />
          </div>
          <span>元</span>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="cancel">
        取消
      </el-button>
      <el-button
        type="primary"
        :loading="loading"
        @click="confirm"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { cloneDeep } from 'lodash-es'

const show = ref(false)

const isEdit = ref(false)

const title = computed(() => isEdit.value ? '编辑规则' : '新建规则')

const ranges = ref([])

const validateInRange = (_rule, value, callback) => {
  if (has(value)) {
    const find = ranges.value.find(item => {
      const [min, max] = item
      if (value >= min && value <= max) {
        return true
      }
      return false
    })
    if (find) {
      callback(new Error('不能与已有配置产生交集'))
    } else {
      callback()
    }
  } else {
    const find = ranges.value.find(item => item[1] == Infinity)
    if (find) {
      callback(new Error('不能与已有配置产生交集'))
    } else {
      callback()
    }
  }
}

let _cb

const form = ref({})
const formRef = ref()
const loading = ref(false)
const rules = reactive({
  priceFloor: [
    {
      required: true, message: '请输入订单金额下限'
    },
    {
      validator: validateInRange
    }
  ],
  priceCeiling: [{
    validator: (_rule, value, callback) => {
      if (value && form.value.priceFloor) {
        if (value <= form.value.priceFloor) {
          callback(new Error('订单金额上限不能小于下限'))
          return
        }
      }
      callback()
    }
  }, {
    validator: validateInRange
  }],
  freightFee: [{ required: true, message: '请输入运费' }]
})

const add = (rg, cb) => {
  ranges.value = rg
  _cb = cb
  isEdit.value = false
  form.value = {
    priceFloor: undefined
  }
  show.value = true
}

const edit = (rg, row, cb) => {
  ranges.value = rg
  _cb = cb
  isEdit.value = true
  form.value = cloneDeep(row)
  show.value = true
}

const cancel = () => {
  show.value = false
}

const confirm = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      loading.value = true
      await _cb(form.value)
      loading.value = false
      show.value = false
    }
  })
}

defineExpose({
  edit,
  add
})
</script>
